<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>招商加盟 - 商机列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #2c6ecb;
            --primary-light: #4a89dc;
            --secondary: #f6bb42;
            --success: #37bc9b;
            --danger: #da4453;
            --text-primary: #333333;
            --text-secondary: #656d78;
            --text-tertiary: #aab2bd;
            --bg-light: #f5f7fa;
            --bg-white: #ffffff;
            --border-light: #e6e9ed;
            --radius: 8px;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--primary);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-align: center;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: white;
            font-size: 20px;
        }
        
        /* 搜索栏 */
        .search-container {
            background-color: var(--bg-white);
            padding: 12px 16px;
            position: sticky;
            top: 56px;
            z-index: 900;
            border-bottom: 1px solid var(--border-light);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary);
            background-color: white;
        }
        
        .search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
        }
        
        /* 高级搜索按钮 */
        .advanced-search-btn {
            display: block;
            margin: 8px auto 0;
            background: none;
            border: none;
            color: var(--primary);
            font-size: 13px;
            padding: 4px 12px;
        }
        
        /* 筛选栏 */
        .filter-bar {
            background-color: var(--bg-white);
            padding: 0 16px;
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
            border-bottom: 1px solid var(--border-light);
        }
        
        .filter-item {
            padding: 12px 16px;
            font-size: 14px;
            color: var(--text-secondary);
            border: none;
            background: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-item.active {
            color: var(--primary);
            font-weight: 500;
            position: relative;
        }
        
        .filter-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary);
        }
        
        .filter-icon {
            font-size: 16px;
        }
        
        /* 筛选标签容器 */
        .filter-tags-container {
            background-color: var(--bg-white);
            padding: 8px 16px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }
        
        .filter-tag {
            background-color: rgba(44, 110, 203, 0.1);
            color: var(--primary);
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-tag-remove {
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            padding: 0;
            font-size: 12px;
        }
        
        .clear-all-filters {
            color: var(--text-secondary);
            font-size: 12px;
            background: none;
            border: none;
            margin-left: auto;
            padding: 4px 8px;
        }
        
        /* 招商加盟列表 */
        .franchise-list {
            padding: 10px 16px;
        }
        
        .franchise-item {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: var(--shadow);
            transition: transform 0.2s ease;
        }
        
        .franchise-item:hover {
            transform: translateY(-2px);
        }
        
        .franchise-link {
            text-decoration: none;
            color: var(--text-primary);
            display: block;
        }
        
        /* 无图样式 */
        .franchise-no-image {
            padding: 16px;
        }
        
        /* 单图样式 */
        .franchise-single-image {
            display: flex;
            gap: 12px;
        }
        
        .single-image-container {
            width: 100px;
            height: 100px;
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .single-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .single-image-content {
            padding: 16px 16px 16px 0;
            flex: 1;
        }
        
        /* 多图样式 */
        .franchise-multi-image {
            padding: 16px;
        }
        
        .multi-images-container {
            display: flex;
            gap: 6px;
            margin-top: 10px;
        }
        
        .multi-image {
            width: 32%;
            height: 80px;
            border-radius: 4px;
            object-fit: cover;
        }
        
        /* 内容通用样式 */
        .franchise-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 6px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .franchise-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }
        
        .meta-item {
            font-size: 12px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .meta-icon {
            font-size: 12px;
        }
        
        .franchise-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .franchise-tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            background-color: rgba(44, 110, 203, 0.1);
            color: var(--primary);
        }
        
        .tag-investment {
            background-color: rgba(246, 187, 66, 0.1);
            color: #d87c28;
        }
        
        .tag-hot {
            background-color: rgba(218, 68, 83, 0.1);
            color: var(--danger);
        }
        
        /* 底部操作栏 */
        .franchise-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 16px;
            border-top: 1px solid var(--border-light);
            margin-top: 8px;
        }
        
        .action-stats {
            display: flex;
            gap: 16px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .contact-btn {
            padding: 4px 12px;
            border-radius: 14px;
            background-color: var(--primary);
            color: white;
            border: none;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 加载更多 */
        .load-more {
            padding: 20px 16px;
            text-align: center;
        }
        
        .load-more-btn {
            padding: 8px 24px;
            border-radius: 20px;
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            color: var(--text-secondary);
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 0 auto;
        }
        
        .load-more-btn.loading {
            color: var(--text-tertiary);
        }
        
        .load-more-btn.loading i {
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 20px;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 筛选弹窗 */
        .filter-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            display: none;
            justify-content: flex-end;
        }
        
        .filter-modal.active {
            display: flex;
        }
        
        .filter-content {
            width: 100%;
            max-width: 350px;
            background-color: var(--bg-white);
            border-radius: var(--radius) var(--radius) 0 0;
            max-height: 90vh;
            overflow-y: auto;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .filter-modal.active .filter-content {
            transform: translateY(0);
        }
        
        .filter-header {
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .filter-close {
            background: none;
            border: none;
            font-size: 20px;
            color: var(--text-secondary);
        }
        
        .filter-body {
            padding: 16px;
        }
        
        .filter-section {
            margin-bottom: 24px;
        }
        
        .filter-section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-primary);
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .filter-option {
            padding: 6px 14px;
            border-radius: 16px;
            border: 1px solid var(--border-light);
            font-size: 14px;
            color: var(--text-secondary);
            background: none;
        }
        
        .filter-option.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .filter-footer {
            padding: 16px;
            border-top: 1px solid var(--border-light);
            display: flex;
            gap: 12px;
        }
        
        .filter-btn {
            flex: 1;
            padding: 10px;
            border-radius: var(--radius);
            font-size: 16px;
            font-weight: 500;
            border: none;
        }
        
        .reset-btn {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .confirm-btn {
            background-color: var(--primary);
            color: white;
        }
        
        /* 高级搜索弹窗 */
        .advanced-search-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 2000;
            display: none;
            justify-content: flex-end;
        }
        
        .advanced-search-modal.active {
            display: flex;
        }
        
        .advanced-search-content {
            width: 100%;
            background-color: var(--bg-white);
            border-radius: var(--radius) var(--radius) 0 0;
            max-height: 90vh;
            overflow-y: auto;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        
        .advanced-search-modal.active .advanced-search-content {
            transform: translateY(0);
        }
        
        .search-form-group {
            margin-bottom: 16px;
        }
        
        .search-form-label {
            display: block;
            margin-bottom: 6px;
            font-size: 14px;
            color: var(--text-primary);
        }
        
        .search-form-control {
            width: 100%;
            padding: 10px 12px;
            border-radius: var(--radius);
            border: 1px solid var(--border-light);
            font-size: 14px;
        }
        
        .search-form-control:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        /* 图片查看器 */
        .image-viewer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            z-index: 2000;
            display: none;
            justify-content: center;
            align-items: center;
        }
        
        .image-viewer.active {
            display: flex;
        }
        
        .viewer-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .close-viewer {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .viewer-count {
            position: absolute;
            top: 16px;
            left: 16px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 14px;
            padding: 4px 10px;
            border-radius: 12px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">招商加盟</div>
        <button class="nav-btn" id="publishBtn">
            <i class="fas fa-plus"></i>
        </button>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-container">
        <div class="search-box">
            <i class="fas fa-search search-icon"></i>
            <input type="text" class="search-input" placeholder="搜索招商项目、品牌、行业...">
        </div>
        <button class="advanced-search-btn" id="advancedSearchBtn">
            <i class="fas fa-sliders-h"></i> 高级搜索
        </button>
    </div>
    
    <!-- 筛选标签容器 -->
    <div class="filter-tags-container" id="filterTagsContainer" style="display: none;">
        <!-- 筛选标签会动态添加到这里 -->
        <button class="clear-all-filters" id="clearAllFilters">清除全部</button>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <button class="filter-item active" data-type="industry" data-value="all">
            <span>全部</span>
        </button>
        <button class="filter-item" data-type="industry" data-value="food">
            <span>餐饮美食</span>
        </button>
        <button class="filter-item" data-type="industry" data-value="education">
            <span>教育培训</span>
        </button>
        <button class="filter-item" data-type="industry" data-value="entertainment">
            <span>休闲娱乐</span>
        </button>
        <button class="filter-item" data-type="industry" data-value="retail">
            <span>零售超市</span>
        </button>
        <button class="filter-item" data-type="industry" data-value="beauty">
            <span>美容养生</span>
        </button>
        <button class="filter-item" id="openFilterModal">
            <i class="fas fa-sliders-h filter-icon"></i>
            <span>更多筛选</span>
        </button>
    </div>
    
    <!-- 招商加盟列表 -->
    <div class="franchise-list" id="franchiseList">
        <!-- 无图样式 -->
        <div class="franchise-item" data-industry="education" data-investment="5-10" data-hot="true">
            <a href="#" class="franchise-link">
                <div class="franchise-no-image">
                    <h3 class="franchise-title">2023年热门教育品牌招商，全程扶持，低门槛创业</h3>
                    
                    <div class="franchise-meta">
                        <div class="meta-item">
                            <i class="fas fa-building meta-icon"></i>
                            <span>智慧教育集团</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt meta-icon"></i>
                            <span>全国招商</span>
                        </div>
                        <div class="meta-item">
                            <i class="far fa-clock meta-icon"></i>
                            <span>2小时前更新</span>
                        </div>
                    </div>
                    
                    <div class="franchise-tags">
                        <span class="franchise-tag">教育培训</span>
                        <span class="franchise-tag tag-investment">5-10万</span>
                        <span class="franchise-tag tag-hot">热门项目</span>
                    </div>
                </div>
                
                <div class="franchise-actions">
                    <div class="action-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>2.5k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>128</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>356</span>
                        </div>
                    </div>
                    <button class="contact-btn">
                        <i class="fas fa-phone"></i>
                        <span>咨询</span>
                    </button>
                </div>
            </a>
        </div>
        
        <!-- 单图样式 -->
        <div class="franchise-item" data-industry="food" data-investment="20-50" data-hot="false">
            <a href="#" class="franchise-link">
                <div class="franchise-single-image">
                    <div class="single-image-container">
                        <img src="https://picsum.photos/id/292/300/300" alt="咖啡品牌加盟" class="single-image">
                    </div>
                    <div class="single-image-content">
                        <h3 class="franchise-title">精品咖啡品牌诚招加盟商，提供全套运营支持和培训</h3>
                        
                        <div class="franchise-meta">
                            <div class="meta-item">
                                <i class="fas fa-building meta-icon"></i>
                                <span>醇香咖啡有限公司</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-map-marker-alt meta-icon"></i>
                                <span>一线城市</span>
                            </div>
                            <div class="meta-item">
                                <i class="far fa-clock meta-icon"></i>
                                <span>5小时前更新</span>
                            </div>
                        </div>
                        
                        <div class="franchise-tags">
                            <span class="franchise-tag">餐饮美食</span>
                            <span class="franchise-tag tag-investment">20-50万</span>
                            <span class="franchise-tag">全程扶持</span>
                        </div>
                    </div>
                </div>
                
                <div class="franchise-actions">
                    <div class="action-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>1.8k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>96</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>215</span>
                        </div>
                    </div>
                    <button class="contact-btn">
                        <i class="fas fa-phone"></i>
                        <span>咨询</span>
                    </button>
                </div>
            </a>
        </div>
        
        <!-- 多图样式 -->
        <div class="franchise-item" data-industry="retail" data-investment="50-100" data-hot="false">
            <a href="#" class="franchise-link">
                <div class="franchise-multi-image">
                    <h3 class="franchise-title">连锁便利店品牌招商，成熟运营模式，总部全程支持开店</h3>
                    
                    <div class="franchise-meta">
                        <div class="meta-item">
                            <i class="fas fa-building meta-icon"></i>
                            <span>惠民连锁有限公司</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt meta-icon"></i>
                            <span>全国范围</span>
                        </div>
                        <div class="meta-item">
                            <i class="far fa-clock meta-icon"></i>
                            <span>昨天 14:30</span>
                        </div>
                    </div>
                    
                    <div class="franchise-tags">
                        <span class="franchise-tag">零售超市</span>
                        <span class="franchise-tag tag-investment">50-100万</span>
                        <span class="franchise-tag">品牌保障</span>
                    </div>
                    
                    <div class="multi-images-container" data-images='["https://picsum.photos/id/42/300/300", "https://picsum.photos/id/43/300/300", "https://picsum.photos/id/44/300/300"]'>
                        <img src="https://picsum.photos/id/42/300/300" alt="便利店环境" class="multi-image">
                        <img src="https://picsum.photos/id/43/300/300" alt="商品陈列" class="multi-image">
                        <img src="https://picsum.photos/id/44/300/300" alt="门店外观" class="multi-image">
                    </div>
                </div>
                
                <div class="franchise-actions">
                    <div class="action-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>3.2k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>156</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>428</span>
                        </div>
                    </div>
                    <button class="contact-btn">
                        <i class="fas fa-phone"></i>
                        <span>咨询</span>
                    </button>
                </div>
            </a>
        </div>
        
        <!-- 无图样式 -->
        <div class="franchise-item" data-industry="beauty" data-investment="100-200" data-hot="false">
            <a href="#" class="franchise-link">
                <div class="franchise-no-image">
                    <h3 class="franchise-title">健康养生品牌招商加盟，市场需求大，利润空间高，全程指导</h3>
                    
                    <div class="franchise-meta">
                        <div class="meta-item">
                            <i class="fas fa-building meta-icon"></i>
                            <span>康体养生集团</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt meta-icon"></i>
                            <span>一二线城市</span>
                        </div>
                        <div class="meta-item">
                            <i class="far fa-clock meta-icon"></i>
                            <span>2天前更新</span>
                        </div>
                    </div>
                    
                    <div class="franchise-tags">
                        <span class="franchise-tag">美容养生</span>
                        <span class="franchise-tag tag-investment">100-200万</span>
                        <span class="franchise-tag">整店输出</span>
                    </div>
                </div>
                
                <div class="franchise-actions">
                    <div class="action-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>986</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>76</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>156</span>
                        </div>
                    </div>
                    <button class="contact-btn">
                        <i class="fas fa-phone"></i>
                        <span>咨询</span>
                    </button>
                </div>
            </a>
        </div>
        
        <!-- 多图样式 -->
        <div class="franchise-item" data-industry="entertainment" data-investment="80-150" data-hot="true">
            <a href="#" class="franchise-link">
                <div class="franchise-multi-image">
                    <h3 class="franchise-title">儿童乐园连锁品牌招商，市场潜力大，总部提供全方位支持</h3>
                    
                    <div class="franchise-meta">
                        <div class="meta-item">
                            <i class="fas fa-building meta-icon"></i>
                            <span>童趣游乐有限公司</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-map-marker-alt meta-icon"></i>
                            <span>全国招商</span>
                        </div>
                        <div class="meta-item">
                            <i class="far fa-clock meta-icon"></i>
                            <span>3天前更新</span>
                        </div>
                    </div>
                    
                    <div class="franchise-tags">
                        <span class="franchise-tag">休闲娱乐</span>
                        <span class="franchise-tag tag-investment">80-150万</span>
                        <span class="franchise-tag tag-hot">热门项目</span>
                    </div>
                    
                    <div class="multi-images-container" data-images='["https://picsum.photos/id/106/300/300", "https://picsum.photos/id/107/300/300", "https://picsum.photos/id/108/300/300"]'>
                        <img src="https://picsum.photos/id/106/300/300" alt="乐园环境" class="multi-image">
                        <img src="https://picsum.photos/id/107/300/300" alt="游乐设施" class="multi-image">
                        <img src="https://picsum.photos/id/108/300/300" alt="活动现场" class="multi-image">
                    </div>
                </div>
                
                <div class="franchise-actions">
                    <div class="action-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>2.1k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>103</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>289</span>
                        </div>
                    </div>
                    <button class="contact-btn">
                        <i class="fas fa-phone"></i>
                        <span>咨询</span>
                    </button>
                </div>
            </a>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" id="loadMoreBtn">
            <span>加载更多</span>
            <i class="fas fa-chevron-down"></i>
        </button>
    </div>
    
    <!-- 筛选弹窗 -->
    <div class="filter-modal" id="filterModal">
        <div class="filter-content">
            <div class="filter-header">
                <h3 class="filter-title">筛选条件</h3>
                <button class="filter-close" id="closeFilterModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="filter-body">
                <div class="filter-section">
                    <h4 class="filter-section-title">投资金额</h4>
                    <div class="filter-options" id="investmentOptions">
                        <button class="filter-option" data-type="investment" data-value="all">全部</button>
                        <button class="filter-option" data-type="investment" data-value="0-5">5万以下</button>
                        <button class="filter-option" data-type="investment" data-value="5-10">5-10万</button>
                        <button class="filter-option" data-type="investment" data-value="10-20">10-20万</button>
                        <button class="filter-option" data-type="investment" data-value="20-50">20-50万</button>
                        <button class="filter-option" data-type="investment" data-value="50-100">50-100万</button>
                        <button class="filter-option" data-type="investment" data-value="100+">100万以上</button>
                    </div>
                </div>
                
                <div class="filter-section">
                    <h4 class="filter-section-title">项目热度</h4>
                    <div class="filter-options" id="hotOptions">
                        <button class="filter-option" data-type="hot" data-value="all">全部</button>
                        <button class="filter-option" data-type="hot" data-value="true">热门项目</button>
                        <button class="filter-option" data-type="hot" data-value="false">普通项目</button>
                    </div>
                </div>
                
                <div class="filter-section">
                    <h4 class="filter-section-title">招商区域</h4>
                    <div class="filter-options" id="areaOptions">
                        <button class="filter-option" data-type="area" data-value="all">全部区域</button>
                        <button class="filter-option" data-type="area" data-value="national">全国招商</button>
                        <button class="filter-option" data-type="area" data-value="first-tier">一线城市</button>
                        <button class="filter-option" data-type="area" data-value="second-tier">二线城市</button>
                        <button class="filter-option" data-type="area" data-value="third-tier">三四线城市</button>
                    </div>
                </div>
                
                <div class="filter-section">
                    <h4 class="filter-section-title">更新时间</h4>
                    <div class="filter-options" id="timeOptions">
                        <button class="filter-option" data-type="time" data-value="all">全部时间</button>
                        <button class="filter-option" data-type="time" data-value="today">今天</button>
                        <button class="filter-option" data-type="time" data-value="week">近7天</button>
                        <button class="filter-option" data-type="time" data-value="month">近30天</button>
                    </div>
                </div>
            </div>
            <div class="filter-footer">
                <button class="filter-btn reset-btn" id="resetFilterBtn">重置</button>
                <button class="filter-btn confirm-btn" id="confirmFilterBtn">确认</button>
            </div>
        </div>
    </div>
    
    <!-- 高级搜索弹窗 -->
    <div class="advanced-search-modal" id="advancedSearchModal">
        <div class="advanced-search-content">
            <div class="filter-header">
                <h3 class="filter-title">高级搜索</h3>
                <button class="filter-close" id="closeAdvancedSearchModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="filter-body">
                <form id="advancedSearchForm">
                    <div class="search-form-group">
                        <label class="search-form-label">项目关键词</label>
                        <input type="text" class="search-form-control" name="keywords" placeholder="输入项目名称或关键词">
                    </div>
                    
                    <div class="search-form-group">
                        <label class="search-form-label">品牌名称</label>
                        <input type="text" class="search-form-control" name="brand" placeholder="输入品牌名称">
                    </div>
                    
                    <div class="search-form-group">
                        <label class="search-form-label">最低投资额(万)</label>
                        <input type="number" class="search-form-control" name="minInvestment" placeholder="输入最低投资额">
                    </div>
                    
                    <div class="search-form-group">
                        <label class="search-form-label">最高投资额(万)</label>
                        <input type="number" class="search-form-control" name="maxInvestment" placeholder="输入最高投资额">
                    </div>
                    
                    <div class="search-form-group">
                        <label class="search-form-label">招商区域</label>
                        <select class="search-form-control" name="region">
                            <option value="">请选择区域</option>
                            <option value="national">全国</option>
                            <option value="east">华东地区</option>
                            <option value="south">华南地区</option>
                            <option value="north">华北地区</option>
                            <option value="west">西部地区</option>
                            <option value="central">中部地区</option>
                            <option value="northeast">东北地区</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="filter-footer">
                <button class="filter-btn reset-btn" id="resetSearchBtn">重置</button>
                <button class="filter-btn confirm-btn" id="confirmSearchBtn">搜索</button>
            </div>
        </div>
    </div>
    
    <!-- 图片查看器 -->
    <div class="image-viewer" id="imageViewer">
        <button class="close-viewer" id="closeViewer">
            <i class="fas fa-times"></i>
        </button>
        <div class="viewer-count" id="viewerCount">1/3</div>
        <img src="" alt="图片查看" class="viewer-image" id="viewerImage">
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-handshake nav-icon"></i>
            <span>招商</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell nav-icon"></i>
            <span>消息</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 筛选相关变量
        const filters = {
            industry: 'all',
            investment: 'all',
            hot: 'all',
            area: 'all',
            time: 'all',
            search: {
                keywords: '',
                brand: '',
                minInvestment: '',
                maxInvestment: '',
                region: ''
            }
        };
        
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const publishBtn = document.getElementById('publishBtn');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const filterItems = document.querySelectorAll('.filter-item');
        const contactBtns = document.querySelectorAll('.contact-btn');
        const imageViewer = document.getElementById('imageViewer');
        const viewerImage = document.getElementById('viewerImage');
        const viewerCount = document.getElementById('viewerCount');
        const closeViewer = document.getElementById('closeViewer');
        const toast = document.getElementById('toast');
        const multiImageContainers = document.querySelectorAll('.multi-images-container');
        const filterModal = document.getElementById('filterModal');
        const openFilterModal = document.getElementById('openFilterModal');
        const closeFilterModal = document.getElementById('closeFilterModal');
        const confirmFilterBtn = document.getElementById('confirmFilterBtn');
        const resetFilterBtn = document.getElementById('resetFilterBtn');
        const filterOptions = document.querySelectorAll('.filter-option');
        const filterTagsContainer = document.getElementById('filterTagsContainer');
        const clearAllFilters = document.getElementById('clearAllFilters');
        const franchiseList = document.getElementById('franchiseList');
        const searchInput = document.querySelector('.search-input');
        const advancedSearchBtn = document.getElementById('advancedSearchBtn');
        const advancedSearchModal = document.getElementById('advancedSearchModal');
        const closeAdvancedSearchModal = document.getElementById('closeAdvancedSearchModal');
        const confirmSearchBtn = document.getElementById('confirmSearchBtn');
        const resetSearchBtn = document.getElementById('resetSearchBtn');
        const advancedSearchForm = document.getElementById('advancedSearchForm');
        
        // 图片查看器相关变量
        let currentImages = [];
        let currentImageIndex = 0;
        
        // 初始化
        function init() {
            // 绑定事件监听
            bindEvents();
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
            });
            
            // 发布按钮
            publishBtn.addEventListener('click', () => {
                showToast('发布招商信息功能待开发');
            });
            
            // 筛选按钮
            filterItems.forEach(item => {
                if (item.id !== 'openFilterModal') {
                    item.addEventListener('click', () => {
                        const type = item.getAttribute('data-type');
                        const value = item.getAttribute('data-value');
                        
                        // 更新筛选器状态
                        filters[type] = value;
                        
                        // 更新UI
                        filterItems.forEach(i => i.classList.remove('active'));
                        item.classList.add('active');
                        
                        // 更新筛选标签
                        updateFilterTags();
                        
                        // 应用筛选
                        applyFilters();
                        
                        showToast(`已切换至${item.querySelector('span').textContent}`);
                    });
                }
            });
            
            // 打开筛选弹窗
            openFilterModal.addEventListener('click', () => {
                filterModal.classList.add('active');
                document.body.style.overflow = 'hidden';
                
                // 重置弹窗中的选中状态
                resetFilterModalOptions();
                
                // 根据当前筛选状态设置弹窗选项
                setFilterModalOptions();
            });
            
            // 关闭筛选弹窗
            closeFilterModal.addEventListener('click', () => {
                filterModal.classList.remove('active');
                document.body.style.overflow = 'auto';
            });
            
            // 筛选弹窗中的选项点击
            filterOptions.forEach(option => {
                option.addEventListener('click', () => {
                    const type = option.getAttribute('data-type');
                    const value = option.getAttribute('data-value');
                    
                    // 同一类型的选项只能选中一个
                    document.querySelectorAll(`.filter-option[data-type="${type}"]`)
                        .forEach(opt => opt.classList.remove('active'));
                    
                    option.classList.add('active');
                });
            });
            
            // 确认筛选
            confirmFilterBtn.addEventListener('click', () => {
                // 收集选中的筛选条件
                document.querySelectorAll('.filter-option.active').forEach(option => {
                    const type = option.getAttribute('data-type');
                    const value = option.getAttribute('data-value');
                    filters[type] = value;
                });
                
                // 关闭弹窗
                filterModal.classList.remove('active');
                document.body.style.overflow = 'auto';
                
                // 更新筛选标签
                updateFilterTags();
                
                // 应用筛选
                applyFilters();
                
                showToast('筛选条件已应用');
            });
            
            // 重置筛选
            resetFilterBtn.addEventListener('click', () => {
                // 重置弹窗中的选项
                resetFilterModalOptions();
            });
            
            // 清除所有筛选
            clearAllFilters.addEventListener('click', () => {
                // 重置筛选器
                Object.keys(filters).forEach(key => {
                    if (key === 'search') {
                        filters[key] = {
                            keywords: '',
                            brand: '',
                            minInvestment: '',
                            maxInvestment: '',
                            region: ''
                        };
                    } else {
                        filters[key] = 'all';
                    }
                });
                
                // 重置UI
                filterItems.forEach(item => {
                    if (item.getAttribute('data-value') === 'all') {
                        item.classList.add('active');
                    } else {
                        item.classList.remove('active');
                    }
                });
                
                // 清空搜索框
                searchInput.value = '';
                
                // 重置高级搜索表单
                advancedSearchForm.reset();
                
                // 清空筛选标签
                clearFilterTags();
                
                // 应用筛选
                applyFilters();
                
                showToast('已清除所有筛选条件');
            });
            
            // 联系按钮
            contactBtns.forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    const title = btn.closest('.franchise-item').querySelector('.franchise-title').textContent;
                    showToast(`正在联系【${title.substring(0, 10)}...】`);
                });
            });
            
            // 图片查看器
            multiImageContainers.forEach(container => {
                container.addEventListener('click', (e) => {
                    e.preventDefault();
                    // 获取点击的图片索引
                    const images = container.querySelectorAll('.multi-image');
                    const clickedImage = e.target.closest('.multi-image');
                    
                    if (clickedImage) {
                        // 获取图片数组
                        currentImages = JSON.parse(container.getAttribute('data-images'));
                        // 获取当前点击的图片索引
                        currentImageIndex = Array.from(images).indexOf(clickedImage);
                        // 打开图片查看器
                        openImageViewer();
                    }
                });
            });
            
            // 关闭图片查看器
            closeViewer.addEventListener('click', () => {
                imageViewer.classList.remove('active');
                document.body.style.overflow = 'auto';
            });
            
            // 图片查看器左右滑动切换图片
            let startX = 0;
            imageViewer.addEventListener('touchstart', (e) => {
                startX = e.touches[0].clientX;
            });
            
            imageViewer.addEventListener('touchend', (e) => {
                const endX = e.changedTouches[0].clientX;
                const diffX = endX - startX;
                
                // 滑动距离足够大才切换图片
                if (Math.abs(diffX) > 50) {
                    if (diffX > 0) {
                        // 向右滑动，查看上一张
                        currentImageIndex = (currentImageIndex - 1 + currentImages.length) % currentImages.length;
                    } else {
                        // 向左滑动，查看下一张
                        currentImageIndex = (currentImageIndex + 1) % currentImages.length;
                    }
                    viewerImage.src = currentImages[currentImageIndex];
                    viewerCount.textContent = `${currentImageIndex + 1}/${currentImages.length}`;
                }
            });
            
            // 加载更多
            loadMoreBtn.addEventListener('click', function() {
                this.innerHTML = '<span>加载中</span><i class="fas fa-spinner"></i>';
                this.classList.add('loading');
                
                // 模拟加载延迟
                setTimeout(() => {
                    // 随机添加3个不同样式的招商项目
                    for (let i = 0; i < 3; i++) {
                        const randomType = Math.floor(Math.random() * 3); // 0:无图, 1:单图, 2:多图
                        const randomId = 200 + i;
                        const industries = [
                            {name: '餐饮美食', value: 'food'},
                            {name: '教育培训', value: 'education'},
                            {name: '休闲娱乐', value: 'entertainment'},
                            {name: '零售超市', value: 'retail'},
                            {name: '美容养生', value: 'beauty'}
                        ];
                        const industry = industries[Math.floor(Math.random() * industries.length)];
                        const investments = ['5-10', '10-20', '20-50', '50-100', '100+'];
                        const investment = investments[Math.floor(Math.random() * investments.length)];
                        const isHot = Math.random() > 0.7;
                        
                        let itemHtml = '';
                        
                        if (randomType === 0) {
                            // 无图样式
                            itemHtml = `
                                <div class="franchise-item" data-industry="${industry.value}" data-investment="${investment}" data-hot="${isHot}">
                                    <a href="#" class="franchise-link">
                                        <div class="franchise-no-image">
                                            <h3 class="franchise-title">优质${industry.name}品牌招商，总部全程扶持，创业无忧${i+1}</h3>
                                            
                                            <div class="franchise-meta">
                                                <div class="meta-item">
                                                    <i class="fas fa-building meta-icon"></i>
                                                    <span>诚信招商企业${i+1}</span>
                                                </div>
                                                <div class="meta-item">
                                                    <i class="fas fa-map-marker-alt meta-icon"></i>
                                                    <span>全国招商</span>
                                                </div>
                                                <div class="meta-item">
                                                    <i class="far fa-clock meta-icon"></i>
                                                    <span>${i+3}天前更新</span>
                                                </div>
                                            </div>
                                            
                                            <div class="franchise-tags">
                                                <span class="franchise-tag">${industry.name}</span>
                                                <span class="franchise-tag tag-investment">${investment.replace('+', '-200')}万</span>
                                                ${isHot ? '<span class="franchise-tag tag-hot">热门项目</span>' : ''}
                                            </div>
                                        </div>
                                        
                                        <div class="franchise-actions">
                                            <div class="action-stats">
                                                <div class="stat-item">
                                                    <i class="far fa-eye"></i>
                                                    <span>${Math.floor(Math.random() * 2000) + 500}</span>
                                                </div>
                                                <div class="stat-item">
                                                    <i class="far fa-comment"></i>
                                                    <span>${Math.floor(Math.random() * 100) + 30}</span>
                                                </div>
                                                <div class="stat-item">
                                                    <i class="far fa-heart"></i>
                                                    <span>${Math.floor(Math.random() * 300) + 80}</span>
                                                </div>
                                            </div>
                                            <button class="contact-btn">
                                                <i class="fas fa-phone"></i>
                                                <span>咨询</span>
                                            </button>
                                        </div>
                                    </a>
                                </div>
                            `;
                        } else if (randomType === 1) {
                            // 单图样式
                            itemHtml = `
                                <div class="franchise-item" data-industry="${industry.value}" data-investment="${investment}" data-hot="${isHot}">
                                    <a href="#" class="franchise-link">
                                        <div class="franchise-single-image">
                                            <div class="single-image-container">
                                                <img src="https://picsum.photos/id/${randomId}/300/300" alt="${industry.name}加盟" class="single-image">
                                            </div>
                                            <div class="single-image-content">
                                                <h3 class="franchise-title">${industry.name}连锁品牌招商，低投入高回报，诚邀加盟${i+1}</h3>
                                                
                                                <div class="franchise-meta">
                                                    <div class="meta-item">
                                                        <i class="fas fa-building meta-icon"></i>
                                                        <span>知名品牌企业${i+1}</span>
                                                    </div>
                                                    <div class="meta-item">
                                                        <i class="fas fa-map-marker-alt meta-icon"></i>
                                                        <span>全国范围</span>
                                                    </div>
                                                    <div class="meta-item">
                                                        <i class="far fa-clock meta-icon"></i>
                                                        <span>${i+4}天前更新</span>
                                                    </div>
                                                </div>
                                                
                                                <div class="franchise-tags">
                                                    <span class="franchise-tag">${industry.name}</span>
                                                    <span class="franchise-tag tag-investment">${investment.replace('+', '-200')}万</span>
                                                    <span class="franchise-tag">全程扶持</span>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="franchise-actions">
                                            <div class="action-stats">
                                                <div class="stat-item">
                                                    <i class="far fa-eye"></i>
                                                    <span>${Math.floor(Math.random() * 2000) + 500}</span>
                                                </div>
                                                <div class="stat-item">
                                                    <i class="far fa-comment"></i>
                                                    <span>${Math.floor(Math.random() * 100) + 30}</span>
                                                </div>
                                                <div class="stat-item">
                                                    <i class="far fa-heart"></i>
                                                    <span>${Math.floor(Math.random() * 300) + 80}</span>
                                                </div>
                                            </div>
                                            <button class="contact-btn">
                                                <i class="fas fa-phone"></i>
                                                <span>咨询</span>
                                            </button>
                                        </div>
                                    </a>
                                </div>
                            `;
                        } else {
                            // 多图样式
                            const imgIds = [randomId, randomId+1, randomId+2];
                            itemHtml = `
                                <div class="franchise-item" data-industry="${industry.value}" data-investment="${investment}" data-hot="${isHot}">
                                    <a href="#" class="franchise-link">
                                        <div class="franchise-multi-image">
                                            <h3 class="franchise-title">${industry.name}优质品牌招商，成熟运营体系，加盟即盈利${i+1}</h3>
                                            
                                            <div class="franchise-meta">
                                                <div class="meta-item">
                                                    <i class="fas fa-building meta-icon"></i>
                                                    <span>行业领先企业${i+1}</span>
                                                </div>
                                                <div class="meta-item">
                                                    <i class="fas fa-map-marker-alt meta-icon"></i>
                                                    <span>全国招商</span>
                                                </div>
                                                <div class="meta-item">
                                                    <i class="far fa-clock meta-icon"></i>
                                                    <span>${i+5}天前更新</span>
                                                </div>
                                            </div>
                                            
                                            <div class="franchise-tags">
                                                <span class="franchise-tag">${industry.name}</span>
                                                <span class="franchise-tag tag-investment">${investment.replace('+', '-200')}万</span>
                                                ${isHot ? '<span class="franchise-tag tag-hot">热门项目</span>' : ''}
                                            </div>
                                            
                                            <div class="multi-images-container" data-images='["https://picsum.photos/id/${imgIds[0]}/300/300", "https://picsum.photos/id/${imgIds[1]}/300/300", "https://picsum.photos/id/${imgIds[2]}/300/300"]'>
                                                <img src="https://picsum.photos/id/${imgIds[0]}/300/300" alt="项目图片1" class="multi-image">
                                                <img src="https://picsum.photos/id/${imgIds[1]}/300/300" alt="项目图片2" class="multi-image">
                                                <img src="https://picsum.photos/id/${imgIds[2]}/300/300" alt="项目图片3" class="multi-image">
                                            </div>
                                        </div>
                                        
                                        <div class="franchise-actions">
                                            <div class="action-stats">
                                                <div class="stat-item">
                                                    <i class="far fa-eye"></i>
                                                    <span>${Math.floor(Math.random() * 2000) + 500}</span>
                                                </div>
                                                <div class="stat-item">
                                                    <i class="far fa-comment"></i>
                                                    <span>${Math.floor(Math.random() * 100) + 30}</span>
                                                </div>
                                                <div class="stat-item">
                                                    <i class="far fa-heart"></i>
                                                    <span>${Math.floor(Math.random() * 300) + 80}</span>
                                                </div>
                                            </div>
                                            <button class="contact-btn">
                                                <i class="fas fa-phone"></i>
                                                <span>咨询</span>
                                            </button>
                                        </div>
                                    </a>
                                </div>
                            `;
                        }
                        
                        franchiseList.insertAdjacentHTML('beforeend', itemHtml);
                    }
                    
                    // 重新绑定新添加的联系按钮事件
                    const newContactBtns = document.querySelectorAll('.contact-btn:not([data-bound="true"])');
                    newContactBtns.forEach(btn => {
                        btn.setAttribute('data-bound', 'true');
                        btn.addEventListener('click', (e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            const title = btn.closest('.franchise-item').querySelector('.franchise-title').textContent;
                            showToast(`正在联系【${title.substring(0, 10)}...】`);
                        });
                    });
                    
                    // 重新绑定新添加的图片容器事件
                    const newImageContainers = document.querySelectorAll('.multi-images-container:not([data-bound="true"])');
                    newImageContainers.forEach(container => {
                        container.setAttribute('data-bound', 'true');
                        container.addEventListener('click', (e) => {
                            e.preventDefault();
                            const images = container.querySelectorAll('.multi-image');
                            const clickedImage = e.target.closest('.multi-image');
                            
                            if (clickedImage) {
                                currentImages = JSON.parse(container.getAttribute('data-images'));
                                currentImageIndex = Array.from(images).indexOf(clickedImage);
                                openImageViewer();
                            }
                        });
                    });
                    
                    // 恢复按钮状态
                    this.innerHTML = '<span>加载更多</span><i class="fas fa-chevron-down"></i>';
                    this.classList.remove('loading');
                    
                    // 对新加载的项目应用当前筛选条件
                    applyFilters();
                    
                    showToast('已加载更多招商项目');
                }, 1500);
            });
            
            // 搜索框输入事件
            searchInput.addEventListener('input', debounce(function(e) {
                filters.search.keywords = e.target.value.trim();
                applyFilters();
            }, 500));
            
            // 高级搜索按钮
            advancedSearchBtn.addEventListener('click', () => {
                advancedSearchModal.classList.add('active');
                document.body.style.overflow = 'hidden';
            });
            
            // 关闭高级搜索弹窗
            closeAdvancedSearchModal.addEventListener('click', () => {
                advancedSearchModal.classList.remove('active');
                document.body.style.overflow = 'auto';
            });
            
            // 确认高级搜索
            confirmSearchBtn.addEventListener('click', () => {
                // 收集表单数据
                const formData = new FormData(advancedSearchForm);
                filters.search.keywords = formData.get('keywords') || '';
                filters.search.brand = formData.get('brand') || '';
                filters.search.minInvestment = formData.get('minInvestment') || '';
                filters.search.maxInvestment = formData.get('maxInvestment') || '';
                filters.search.region = formData.get('region') || '';
                
                // 更新普通搜索框
                searchInput.value = filters.search.keywords;
                
                // 关闭弹窗
                advancedSearchModal.classList.remove('active');
                document.body.style.overflow = 'auto';
                
                // 更新筛选标签
                updateFilterTags();
                
                // 应用筛选
                applyFilters();
                
                showToast('高级搜索已应用');
            });
            
            // 重置高级搜索
            resetSearchBtn.addEventListener('click', () => {
                advancedSearchForm.reset();
            });
            
            // 为所有招商项目添加点击事件，跳转到详情页
            document.addEventListener('click', (e) => {
                const franchiseLink = e.target.closest('.franchise-link');
                if (franchiseLink && !e.target.closest('.contact-btn') && !e.target.closest('.multi-image')) {
                    const title = franchiseLink.querySelector('.franchise-title').textContent;
                    showToast(`查看【${title.substring(0, 10)}...】详情`);
                    // 实际应用中这里应该跳转到详情页
                    // e.preventDefault();
                }
            });
        }
        
        // 打开图片查看器
        function openImageViewer() {
            viewerImage.src = currentImages[currentImageIndex];
            viewerCount.textContent = `${currentImageIndex + 1}/${currentImages.length}`;
            imageViewer.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        
        // 重置筛选弹窗选项
        function resetFilterModalOptions() {
            filterOptions.forEach(option => {
                option.classList.remove('active');
            });
            
            // 默认选中"全部"选项
            document.querySelectorAll('.filter-option[data-value="all"]')
                .forEach(option => option.classList.add('active'));
        }
        
        // 根据当前筛选状态设置弹窗选项
        function setFilterModalOptions() {
            // 先重置所有选项
            resetFilterModalOptions();
            
            // 根据当前筛选状态设置选中
            Object.keys(filters).forEach(type => {
                if (type !== 'search' && filters[type] !== 'all') {
                    const option = document.querySelector(`.filter-option[data-type="${type}"][data-value="${filters[type]}"]`);
                    if (option) {
                        // 先移除同类型的其他选中状态
                        document.querySelectorAll(`.filter-option[data-type="${type}"]`)
                            .forEach(opt => opt.classList.remove('active'));
                        
                        // 设置当前选项为选中
                        option.classList.add('active');
                    }
                }
            });
        }
        
        // 更新筛选标签
        function updateFilterTags() {
            // 先清空现有标签（保留"清除全部"按钮）
            const clearBtn = document.getElementById('clearAllFilters');
            filterTagsContainer.innerHTML = '';
            filterTagsContainer.appendChild(clearBtn);
            
            // 检查是否有筛选条件
            let hasFilters = false;
            
            // 添加行业筛选标签
            if (filters.industry !== 'all') {
                hasFilters = true;
                const industryText = getIndustryText(filters.industry);
                addFilterTag('industry', filters.industry, industryText);
            }
            
            // 添加投资金额筛选标签
            if (filters.investment !== 'all') {
                hasFilters = true;
                const investmentText = getInvestmentText(filters.investment);
                addFilterTag('investment', filters.investment, investmentText);
            }
            
            // 添加项目热度筛选标签
            if (filters.hot !== 'all') {
                hasFilters = true;
                const hotText = filters.hot === 'true' ? '热门项目' : '普通项目';
                addFilterTag('hot', filters.hot, hotText);
            }
            
            // 添加区域筛选标签
            if (filters.area !== 'all') {
                hasFilters = true;
                const areaText = getAreaText(filters.area);
                addFilterTag('area', filters.area, areaText);
            }
            
            // 添加时间筛选标签
            if (filters.time !== 'all') {
                hasFilters = true;
                const timeText = getTimeText(filters.time);
                addFilterTag('time', filters.time, timeText);
            }
            
            // 添加搜索关键词标签
            if (filters.search.keywords) {
                hasFilters = true;
                addFilterTag('search.keywords', filters.search.keywords, `关键词: ${filters.search.keywords}`);
            }
            
            // 添加品牌筛选标签
            if (filters.search.brand) {
                hasFilters = true;
                addFilterTag('search.brand', filters.search.brand, `品牌: ${filters.search.brand}`);
            }
            
            // 显示或隐藏筛选标签容器
            filterTagsContainer.style.display = hasFilters ? 'flex' : 'none';
        }
        
        // 添加筛选标签
        function addFilterTag(type, value, text) {
            const tag = document.createElement('div');
            tag.className = 'filter-tag';
            tag.innerHTML = `
                <span>${text}</span>
                <button class="filter-tag-remove" data-type="${type}" data-value="${value}">
                    <i class="fas fa-times"></i>
                </button>
            `;
            
            // 添加到容器
            const clearBtn = document.getElementById('clearAllFilters');
            filterTagsContainer.insertBefore(tag, clearBtn);
            
            // 绑定删除事件
            tag.querySelector('.filter-tag-remove').addEventListener('click', function() {
                const type = this.getAttribute('data-type');
                const value = this.getAttribute('data-value');
                
                // 更新筛选器
                if (type.includes('.')) {
                    const [parent, child] = type.split('.');
                    filters[parent][child] = '';
                    
                    // 如果是关键词搜索，更新搜索框
                    if (type === 'search.keywords') {
                        searchInput.value = '';
                    }
                } else {
                    filters[type] = 'all';
                    
                    // 如果是行业筛选，更新顶部筛选按钮状态
                    if (type === 'industry') {
                        filterItems.forEach(item => {
                            if (item.getAttribute('data-type') === 'industry') {
                                if (item.getAttribute('data-value') === 'all') {
                                    item.classList.add('active');
                                } else {
                                    item.classList.remove('active');
                                }
                            }
                        });
                    }
                }
                
                // 移除标签
                tag.remove();
                
                // 检查是否还有其他标签
                const remainingTags = filterTagsContainer.querySelectorAll('.filter-tag');
                if (remainingTags.length === 0) {
                    filterTagsContainer.style.display = 'none';
                }
                
                // 应用筛选
                applyFilters();
                
                showToast('已移除筛选条件');
            });
        }
        
        // 清空筛选标签
        function clearFilterTags() {
            const clearBtn = document.getElementById('clearAllFilters');
            filterTagsContainer.innerHTML = '';
            filterTagsContainer.appendChild(clearBtn);
            filterTagsContainer.style.display = 'none';
        }
        
        // 应用筛选条件
        function applyFilters() {
            const items = document.querySelectorAll('.franchise-item');
            let visibleCount = 0;
            
            items.forEach(item => {
                let isVisible = true;
                
                // 行业筛选
                if (filters.industry !== 'all' && item.getAttribute('data-industry') !== filters.industry) {
                    isVisible = false;
                }
                
                // 投资金额筛选
                if (isVisible && filters.investment !== 'all' && item.getAttribute('data-investment') !== filters.investment) {
                    isVisible = false;
                }
                
                // 项目热度筛选
                if (isVisible && filters.hot !== 'all' && item.getAttribute('data-hot') !== filters.hot) {
                    isVisible = false;
                }
                
                // 关键词搜索筛选
                if (isVisible && filters.search.keywords) {
                    const title = item.querySelector('.franchise-title').textContent.toLowerCase();
                    const keywords = filters.search.keywords.toLowerCase();
                    if (!title.includes(keywords)) {
                        isVisible = false;
                    }
                }
                
                // 品牌筛选
                if (isVisible && filters.search.brand) {
                    const brand = item.querySelector('.meta-item .fas.fa-building + span').textContent.toLowerCase();
                    const searchBrand = filters.search.brand.toLowerCase();
                    if (!brand.includes(searchBrand)) {
                        isVisible = false;
                    }
                }
                
                // 显示或隐藏项目
                item.style.display = isVisible ? 'block' : 'none';
                
                if (isVisible) {
                    visibleCount++;
                }
            });
            
            // 显示筛选结果数量
            showToast(`找到 ${visibleCount} 个符合条件的项目`);
        }
        
        // 获取行业文本
        function getIndustryText(value) {
            const industryMap = {
                'all': '全部行业',
                'food': '餐饮美食',
                'education': '教育培训',
                'entertainment': '休闲娱乐',
                'retail': '零售超市',
                'beauty': '美容养生'
            };
            return industryMap[value] || value;
        }
        
        // 获取投资金额文本
        function getInvestmentText(value) {
            const investmentMap = {
                'all': '全部金额',
                '0-5': '5万以下',
                '5-10': '5-10万',
                '10-20': '10-20万',
                '20-50': '20-50万',
                '50-100': '50-100万',
                '100+': '100万以上'
            };
            return investmentMap[value] || value;
        }
        
        // 获取区域文本
        function getAreaText(value) {
            const areaMap = {
                'all': '全部区域',
                'national': '全国招商',
                'first-tier': '一线城市',
                'second-tier': '二线城市',
                'third-tier': '三四线城市'
            };
            return areaMap[value] || value;
        }
        
        // 获取时间文本
        function getTimeText(value) {
            const timeMap = {
                'all': '全部时间',
                'today': '今天',
                'week': '近7天',
                'month': '近30天'
            };
            return timeMap[value] || value;
        }
        
        // 提示消息功能
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this;
                const args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }
        
        // 初始化
        init();
    </script>
</body>
</html>

